@charset "UTF-8";
//-----------------------------------------------------
// mixin scss
//-----------------------------------------------------


// mixin
// 通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
//----------------------------------------
@mixin wh($w:auto,$h:auto,$lh:normal){
  width:$w;
  height:$h;
  line-height:$lh;
}
// inline-block
// ie6-7 *display: inline;*zoom:1;
@mixin inline-block {
  display: inline-block;
  @if $lte7 {
    *display: inline;*zoom:1;
  }
}

%flex{
  @include display-flex;
  @include justify-content(space-between);
}

%active{
  &:active{
    background: $grayLighter;
  }
}

%disable{
  -webkit-pointer-events:none;
  -moz-pointer-events:none;
  -ms-pointer-events:none;
  pointer-events:none;
}

%before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  height: 1px;
  width: 100%;
  background-color: $grayLighter;
  display: block;
  z-index: $zindexFixedTopbar;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

// Center-align a block level element
// block得有宽度margin左右为auto才能居中
@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}

// float left & right
@mixin float($float:left) {
  float: $float;
  @if $lte7 {
    display: inline;
  }
}

// clearfix
@mixin clearfix {
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}

// Hide from both screenreaders and browsers: h5bp.com/u
@mixin hidden {
  display: none !important;
  visibility: hidden;
}

// Hide only visually, but have it available for screenreaders
@mixin visually-hidden {
  position: absolute;
  @if $lte7 {
    clip:rect(1px 1px 1px 1px);//ie6/7
  }
  clip:rect(1px, 1px, 1px, 1px);//standard
}

// Hide visually and from screenreaders, but maintain layout
@mixin invisible {
  visibility: hidden;
}

// ul has list style
@mixin ul-has-style {
  margin-left:25px;
  list-style:disc;
}

// CSS image replacement
// 原生7,8不支持color的transparent
// 高度不能超过字体大小乘以99（line-height）
// 使用的时候请确定元素可以设置宽度或高度，即非inline元素
@mixin ir($lh:99) {
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  line-height:99;
  overflow:hidden;
}

// Text overflow
// 元素可以设置宽度才可应用省略号
// $substract单位为%
%ellipsis-basic{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@mixin ellipsis($substract:0) {
  @extend %ellipsis-basic;
  width:100% - $substract;
}

// 斑马线渐变
// 传入的$bgColor即为实现的斑马线背景色
@mixin gradient-striped($bgColor: #555, $angle: 45deg) {
  background-color: $bgColor;
  @include gradient-directional($angle, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%, transparent);
}

// Opacity
// lte8使用filter兼容
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  @if $filter{
    filter: alpha(opacity=$opacity);
  }
}

// triangle
%triangle-basic{
  content:"";
  height: 0;
  width: 0;
}
@mixin triangle($direction, $size, $borderColor ) {
  @extend %triangle-basic;
  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  }
  @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
  @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  }
  @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
}

// rem
// thanks:http://drublic.de/blog/rem-fallback-sass-less/;
@mixin rem($property, $px) {
  #{$property}: $px * $baseFontSize;
  #{$property}: #{$px}rem;
}
@mixin rem-font-size($px) {
  font-size: $px * $baseFontSize;
  font-size: #{$px}rem;
}

//背景色半透明
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){
  color:#fff;
  @if $filter{
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');
  }@else{
    background-color: #333;
  }
  background-color:$bgcolor;
}

// disabled
// 禁用样式，加!important
@mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}

//最小高度
@mixin min-height($height){
  min-height: $height;
  height: auto !important;
  @if $lte7{
    _height: $height;
  }
}

// 水平间隔线，适用于行列表
@mixin horizontal-line($border:1px dashed $gray,$padding:10px){
  border-bottom:$border;
  padding-top:$padding;
  padding-bottom:$padding;
}

// Retina images.
// Use with care - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

//针对火狐的bug
@mixin firefox(){
  @-moz-document url-prefix(){
    @content;
  }
}

// %placeholder selector
// 通过@extend调用，样式组合申明，适用于无参数
//-----------------------------------------------------

// inline-block
%inline-block{
  @include inline-block;
}

// Center-align a block level element
%center-block{
  @include center-block;
}

// float left & right
%float-left{
  @include float;
}
%float-right{
  @include float(right);
}

// clearfix
%clearfix {
  @include clearfix;
}

// Hide from both screenreaders and browsers: h5bp.com/u
%hidden{
  @include hidden;
}

// Hide only visually, but have it available for screenreaders
%visually-hidden{
  @include visually-hidden;
}

// Hide visually and from screenreaders, but maintain layout
%invisible{
  @include invisible;
}

// ul has list style
%ul-has-style{
  @include ul-has-style;
}

// image replacement
%ir{
  @include ir;
}

// text overflow ellipsis
%ellipsis{
  @include ellipsis;
}

//为高级浏览器准备的box-sizing盒子模型，ie8+
%box-sizing-border{
  @include box-sizing;
}

// 垂直渐变，渐变背景是半透明到全透明，这样就可以通过设置背景色来表现渐变
//-------------------------
// 白色，由半透明到全透明
%gradient-linear-light {
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background-image: url();
  @include gradient-vertical(rgba(255,255,255,0.3),rgba(255,255,255,0) 46%);
  @if $filter{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
    :root &{
      @extend %reset-filter;
    }
  }
}
// 黑色，由全透明到半透明
%gradient-linear-dark {
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url();
  @include gradient-vertical(rgba(0,0,0,0), rgba(0,0,0,0.7));
  @if $filter{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000',GradientType=0 ); /* IE6-8 */
    :root &{
      filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    }
  }
}

// 背景色半透明
%bgcolor-alpha{
  @include bgcolor-alpha;
}

// disabled
%disabled{
  @include disabled;
}

// 水平间隔线，适用于行列表
%horizontal-line{
  @include horizontal-line;
}

// 普通transition特效
%all-transition{
  @include transition;
}

// ie6/7 haslayout
%zoom{
  @if $lte7 {
    *zoom:1;
  }
}


//function
//-----------------------------------------------------

// px转em
@function pxToEm($px, $base: 16) {
  @return ($px / $base) * 1em;
}

// 为颜色添加白色，以百分比形式
@function tint($color, $percent){
  @return mix(white, $color, $percent);
}

// 为颜色添加黑色，以百分比形式
@function shade($color, $percent){
  @return mix(black, $color, $percent);
}
